// 1px的mixin，传入颜色和dpi
border-1px($color,$dpr,$scaleY){
    position relative
    &::after {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        left: 0;
        top: 100%;
        height 1px;
        background-color $color;
    }
    @media (-webkit-device-pixel-ratio:$dpr),(-webkit-max-device-pixel-ratio:$dpr),(-webkit-min-pixel-ratio:$dpr){
        &::after{
            transform: scaleY($scaleY)
        }
    } 
}
    
// 背景图片响应式查询的mixin
query-bg($url)
    background-image: url($url + '@2x.png')
    background-size: cover;
    @media (-webkit-device-pixel-ratio:3),(-webkit-max-device-pixel-ratio:3),(-webkit-min-pixel-ratio:3)
        background-image: url($url + '@3x.png')


// 媒体查询：底部画横线
bottom-line($line-color){
  &::after {
    content: '';
    position: absolute;
    height: 1px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $line-color;
  }

  @media (-webkit-device-pixel-ratio: 2), (-webkit-max-device-pixel-ratio: 2), (-webkit-min-pixel-ratio: 2) {
    &::after {
      transform: scaleY(0.5);
    }
  }
}

// 媒体查询：顶部画横线
top-line($line-color){
  &::before {
    content: '';
    position: absolute;
    height: 1px;
    top: 0;
    left: 0;
    right: 0;
    background-color: $line-color;
  }

  @media (-webkit-device-pixel-ratio: 2), (-webkit-max-device-pixel-ratio: 2), (-webkit-min-pixel-ratio: 2) {
    &::after {
      transform: scaleY(0.5);
    }
  }
}

$scroll-button-deepblue = rgb(0, 160, 220);

